<template>
  <div>
    <unit-table
      :columns="this.isManager?this.$staticMenu.PLPDataColumns:this.$staticMenu.PLPDataNoActionColumns"
      :url="tableUrl"
      selectType="checkbox"
      :type="tableType"
      :params="tableParams"
      :size="pageSize"
      :sizeOptions="pageSizeOptions"
      :selectedKeys="tableSelectedKeys"
      rowKeyName="id"
      ref="unitTable"
      @onSelect="tableOnSelect"
    >
      <!-- 补充搜索条件 -->
      <a-row slot="searchCri">
        <a-col :span="3">
          <a-input v-model="tableParams.region" class="searchCriteria" placeholder="范围" />
        </a-col>
        <a-col :span="3">
          <a-select
            v-model="tableParams.eventType"
            class="searchCriteria"
          >
            <a-select-option value="全部数据类型">
              全部数据类型
            </a-select-option>
            <a-select-option value="point">
              point
            </a-select-option>
            <a-select-option value="linestring">
              linestring
            </a-select-option>
            <a-select-option value="polygon">
              polygon
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="4">
            <a-range-picker
              class="searchCriteria"
              v-model="time"
              @change="timeChange"
              />
        </a-col>
        <span slot="pointshow" slot-scope="props">
            <a-tooltip placement="top">
              <template slot="title">
                <span>{{props.record.points}}</span>
              </template>
              <span class="ellipsis">{{props.record.points}}</span>
            </a-tooltip>
        </span>
        <a-col :span="3">
          <a-select
            v-model="tableParams.status"
            class="searchCriteria"
            v-if="this.isManager"
          >
            <a-select-option v-for="(item, key) of fileStatus"
                             :key='item.value'
                             :value="item.value"
            >{{ item.label }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="11" style="text-align: right;">
          <a-button type="primary" @click="criteriaSearch">
            <a-icon type="search"/>
            查询
          </a-button>
          <a-button @click="clearCriteria">
            <a-icon type="sync"/>
            </i>重置
          </a-button>
        </a-col>
      </a-row>
      <!-- end -->
      <!-- 补充表格操作 -->
      <div slot='tableAct' class="actionBtn">
        <!-- <a-button type="primary" @click="importFile">
           <a-icon type="import" />导入
         </a-button> -->
        <a-button type="primary" @click="exportData">
          <a-icon type="download"/>
          导出
        </a-button>
        <span style="float:right"  v-if="this.isManager&&approved=='未审批'">
          <a-button type="primary" class="btn-success" @click="acceptAll">
            <a-icon type="check" />审批通过
          </a-button>
          <a-button type="danger" @click="rejectAll">
            <a-icon type="close" />拒绝
          </a-button>
        </span>
        <div>

        </div>

      </div>
      <!-- end -->
      <!-- 补充表格每行的操作 -->
      <span slot="statusSwitch" slot-scope="props">
        <span v-if="props.record.status=='审批通过'" class="text-success">{{props.record.status}}</span>
        <span v-if="props.record.status=='审批拒绝'" class="text-danger">{{props.record.status}}</span>
        <span v-if="props.record.status=='未审批'">{{props.record.status}}</span>
      </span>
      <!-- end -->
      <!-- 补充表格每行的操作 -->
      <span slot="tableRowAct" slot-scope="props">

        <!-- <a-divider type="vertical" v-if="props.record.status=='未审批'" /> -->
        <a v-if="props.record.status=='未审批'" @click="accept(props.record)">
          <span class="ant-tag ant-tag-green">
            <a-icon type="check" />审批通过
          </span>
        </a>
        <!-- <a-divider type="vertical" v-if="props.record.status=='未审批'" /> -->
        <a v-if="props.record.status=='未审批'" @click="reject(props.record)">
          <span class="ant-tag ant-tag-volcano">
            <a-icon type="close" />拒绝
          </span>
        </a>
        <!-- <a-divider type="vertical" /> -->
        <a @click="deletefile(props.record)">
          <span class="ant-tag ant-tag-volcano">
            <a-icon type="close" />删除
          </span>
        </a>
      </span>
    </unit-table>
    <!-- <modal
      ref="importModalForm"
      :title="modalTitle"
      :visible="modalVisible"
      @cancel="handleCancel"
      @ok="handleOk"
    >
    </modal> -->
  </div>
</template>

<script>
  import {
    GETALLSTATUS,
    GETPLPALLLIST,
    PLPAPPROVALACCEPT,
    PLPAPPROVALREJECT,
    PLPDELETE,
    GETPLPACCEPTLIST
  } from '@/../static/js/apis.js'
  import unitTable from "@/common/table"
  import global from "@/../static/global.vue"
  import modal from "./mapModal"

  export default {
    inject: ['reload'],                                 //注入App里的reload方法
    name: 'allUnit',
    components: {
      unitTable,
      modal
    },
    data() {
      return {
        time:[],
        fileStatus: [],
        treeSelectedKeys: '0',
        tableSelectedKeys: [],
        tableType: GETPLPALLLIST.type,  //调用表格组件，必须参数，后台方法方法（get，post）
        pageSize: 15,
        pageSizeOptions: ['15', '20', '40'],
        /*调用表格组件，可选参数，其他相关搜索条件*/
        tableParams: {
          region: "",
          eventType: "全部数据类型",
          timeRange:[],
          status: "全部审批状态",
          menuId: this.$route.query.menuId
        },
        approved: '',
        modalTitle: '',     //modal标题
        modalVisible: false,    //modal关闭打开控制器
      }
    },

    // computed: {
    //   // 判断是否管理员
    //   isManager() {
    //     return localStorage.getItem('role').indexOf('0') > -1
    //   }
    // },
    computed: {
      // 判断是否管理员
      isManager() {
        return global.isManager(global.SYS_DATA_MANAGE)
      },
      tableUrl () {
        return global.isManager(global.SYS_DATA_MANAGE)
          ? GETPLPALLLIST.url
          : GETPLPACCEPTLIST.url
      }
    },
    methods: {
      /*获取静态数据*/
      getStaticData() {
        let self = this
        GETALLSTATUS('', function (res) {
          self.fileStatus = res.obj
        })
      },
      timeChange(date, dateString) {
         this.tableParams.timeRange=dateString
      },
      /*表格checkbox选中事件*/
      tableOnSelect(selectedRowKeys, selectedRows) {
        //   console.log(selectedRowKeys);
        //   console.log(selectedRows);
        this.tableSelectedKeys = selectedRowKeys
      },
      /*查询按钮*/
      criteriaSearch() {
        this.approved = this.tableParams.status
        this.$refs.unitTable.fetch(1)
      },
      /*重置按钮*/
      clearCriteria() {
        this.tableParams.timeRange = []
        this.time=[]
        this.tableParams.eventType = '全部数据类型'
        this.tableParams.region =''
        this.tableParams.status = '全部审批状态'
        this.$refs.unitTable.rowSelection.onChange([ ],[ ])
        this.criteriaSearch()
      },
      importFile() {
        this.modalTitle = "导入文件"
        this.modalVisible = true
      },
      /*modal确定事件*/
      handleOk(e) {
        this.modalVisible = false
      },
      /*modal取消事件*/
      handleCancel(e) {
        this.modalVisible = false
      },
      exportData() {
        const selectedRowKeys = this.tableSelectedKeys
        if (selectedRowKeys.length > 0) {
          window.open(global.dataManUrl + "/rest/import/downloadMulFile?fileIds=" + selectedRowKeys);
        } else {
          this.$message.warning("请在表格中勾选要导出的数据！")
        }
      },
      acceptAll() {
        console.log("67890");
        let self = this
        const selectedRowKeys = self.tableSelectedKeys
        var param = {
          ids: selectedRowKeys,
          userId: this.userId
        }
        if (selectedRowKeys.length > 0) {
          PLPAPPROVALACCEPT(param, function (res) {
            self.$message.success(res.message)
            self.reload()

          })
        } else {
          self.$message.warning("请在表格中勾选要审批的数据！")
        }
      },
      rejectAll() {
        console.log("12345");
        let self = this
        const selectedRowKeys = self.tableSelectedKeys
        var param = {
          ids: selectedRowKeys,
          userId: this.userId
        }
        if (selectedRowKeys.length > 0) {
          PLPAPPROVALREJECT(param, function (res) {
            self.$message.success(res.message)
            self.reload()
          })
        } else {
          self.$message.warning("请在表格中勾选要审批的数据！")
        }
      },
      accept(record) {
        let self = this
        var param = {
          ids: [record.id],
          userId: this.userId
        }
        this.$confirm({
          title: '确定要通过该项吗?',
          content: '',
          onOk () {
            PLPAPPROVALACCEPT(param, function (res) {
              self.$message.success(res.message)
              self.reload()

            })
          }
        })
      },

      deletefile(record) {
        let self = this
        var param = {
          ids: [record.id],
          userId: this.userId
        }

        this.$confirm({
          title: '确定要删除该项吗?',
          content: '',
          onOk () {
            PLPDELETE(param, function (res) {
              self.$message.success(res.message)
              self.reload()
            })
          }
        })
      },
      reject(record) {
        let self = this
        var param = {
          ids: [record.id],
          userId: this.userId
        }
        this.$confirm({
          title: '确定要拒绝该项吗?',
          content: '',
          onOk () {
            PLPAPPROVALREJECT(param, function (res) {
              self.$message.success(res.message)
              self.reload()

            })
          }
        })
      },
    },
    created() {
      this.getStaticData()
    },
    mounted() {
      // console.log(this.isManager)
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .searchCriteria {
    width: 80%;
  }
  .actionBtn button:not(:last-child),
  .ant-row button:not(:last-child) {
    margin-right: 20px;
  }
  .ant-tag {
    margin: 5px;
  }
</style>
